<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>${app.appName}</title>
    <script src="./jquery/jquery-1.11.1-min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
  a{
    text-decoration: none;
  }
  a:hover{
    color: red;
  }
  a:visited{
    color: blue;
  }
</style>

</head>

<body style ="margin:0 auto;background-color:#F1EDF1D5">

    <canvas></canvas>
    <script src="jquery/mouse.js"></script>

    <div style="display: block;  width: 100%;height:95px;"><img src="image/top_bg.png" style="width:100%;height:100%;"></img> </div>

    <c:if test="${appList.size()==0}">
        <div style="margin: 150px auto"></div>
    </c:if>

    <div style="display: block;  width: 130px; margin:35px auto;"><img src="${app.iconUrl}" style="width:120px;height:120px;border-radius:20px;"></img> </div>

<%--    justify-content: flex-start--%>
    <div style ="width:320px; margin:50px auto;display: flex; justify-content: center; align-items: center;margin-top: -15px">
        <c:if test="${app.clientTypeCount==2}">
            <img src="./image/apple.png" style="margin-left:1px;width:44px;height:44px;background-size:44px 44px;"></img>
            <img src="./image/android.png" style="margin-left:1px;width:32px;height:32px;background-size:32px 32px;"></img>
        </c:if>
        <c:if test="${app.clientTypeCount==1&&app.clientType=='Android'}">
            <img src="./image/android.png" style="margin-left:1px;width:32px;height:32px;background-size:32px 32px;"></img>
        </c:if>
        <c:if test="${app.clientTypeCount==1&&app.clientType=='iOS'}">
            <img src="./image/apple.png" style="margin-left:1px;width:32px;height:32px;background-size:32px 32px;"></img>
        </c:if>
	    <span style ="color:black;margin-left:10px;font-size:20px;">${app.appName}</span>
	    <span style ="width:60px;height:24px;line-height:24px;text-align:center;color:white;margin-left:10px;font-size:14px;background:#3FACF1;border-radius:3px;"> 正式版</span>
    </div>

    <c:if test="${app.clientTypeCount==1&&app.clientType=='Android'}">
        <div id="help1" style="display:none;width:200px;color:#778090;font-size:17px;margin:10px auto;display: flex; justify-content: flex-start; align-items: center; visibility: hidden"><span style="display:inline; width:200px;height:50px;position:absolute;left:50%;margin-left:-100px;margin-top:-15px;text-align:center;"> <a href="./hp.html">[了解更多]</a>  </span></div>
    </c:if>
    <c:if test="${app.clientTypeCount==1&&app.clientType=='iOS'||app.clientTypeCount==2}">
        <div id="help1" style="display:none;width:200px;color:#778090;font-size:17px;margin:50px auto;display: flex; justify-content: flex-start; align-items: center;"><span style="display:inline; width:200px;height:50px;position:absolute;left:50%;margin-left:-100px;margin-top:-15px;text-align:center;"> <a href="./hp.html">[了解更多]</a>  </span></div>
    </c:if>


        <c:if test="${app.clientTypeCount==1}">
            <div style="position:relative;left: 50%;transform: translate(-50%, -18%);margin-top: -10px;width: 400px;display: flex; justify-content: center">
                <div id="qrcode1" style="z-index:100; width: 150px;"><img src="${app.qrCodePath}" style="width:150px;height:150px;"></img> </div>
                <div style="position:absolute;background-color: #FFFFFF;width: 150px;margin-top: -18px;text-align: center;font-size: 14px;font-weight: bold;bottom: 0px;z-index: 102">${app.clientType}</div>
            </div>
        </c:if>
        <c:if test="${app.clientTypeCount==2}">
            <div style="position:relative;left:50%;margin-left:-150px;transform: translate(0%, -18%);margin-top: -10px;width: 400px">
                <div id="qrcode" style="z-index:100;display: inline;  width: 150px;"><img src="${app.qrCodePath}" style="width:150px;height:150px;"></img> </div>
                <div style="position:absolute;background-color: #FFFFFF;width: 150px;margin-top: -18px;text-align: center;font-size: 14px;font-weight: bold">ios</div>
                <div id="qrcode2" style="z-index:100;display:inline; width: 150px;"><img src="${app.qrCodePath}" style="width:150px;height:150px;"></img> </div>
                <div style="background-color: #FFFFFF;width: 150px;margin-left: 155.5px;margin-top: -18px;text-align: center;font-size: 14px;font-weight: bold">Android</div>
            </div>
        </c:if>

    <%--<div id="qrcode2" style="z-index:100;display:inline; width: 150px;"><img src="./image/QRCode/1.png" style="width:150px;height:150px;"></img> </div>--%>
    <%--<div style="background-color: #FFFFFF;width: 150px;margin-left: 155.5px;margin-top: -18px;text-align: center;font-size: 14px;font-weight: bold">Android</div>--%>


    <div style="width: 320px; margin-top:-30px;position:relative;left:50%;margin-left:-160px">
        <a id="button1" style="background:#1BBC9C;width:250px;height:50px;color:white;font-size:20px;margin:50px auto;display:block;border-radius:25px;text-align:center;line-height:50px;border-width:0px;" href="login?id=${app.appId}">安装</a>
    </div>

    <div style="width: 100%; height: 23%;position:relative;bottom: 10px;display: flex;flex-wrap: wrap;justify-content: center;align-items: center">

        <c:forEach items="${appList}" var="a">
            <c:if test="${a.notDownload==0}">
                <a style="width: 90px;display: inline-block;height: 90px" href="https://txz.foxconn.com:8080/itapp/index?id=${a.appId}">
                    <img src="${a.iconUrl}" style="width:50px;height:50px;border-radius:10px;display: block;margin: 2px auto;"></img>
                    <span style="display: block;text-align: center;font-size: 13px;font-weight: bold;color: black">${a.appName}</span>
                </a>
            </c:if>
            <c:if test="${a.notDownload==1}">
                <a style="width: 90px;display: inline-block;height: 90px" href="javascript:void(0)" onclick="alert('安装智能工厂APP平台后使用')">
                    <img src="${a.iconUrl}" style="width:50px;height:50px;border-radius:10px;display: block;margin: 2px auto;"></img>
                    <span style="display: block;text-align: center;font-size: 13px;font-weight: bold;color: black">${a.appName}</span>
                </a>
            </c:if>
        </c:forEach>

<%--        <a style="width: 65px;display: inline-block;height: 65px" href="http://localhost:8080/AppDownload/toIndex?id=1">--%>
<%--            <img src="./image/icon/logo.jpg" style="width:50px;height:50px;border-radius:20px;display: block;margin: 2px auto;"></img>--%>
<%--            <span style="display: block;text-align: center;font-size: 13px;font-weight: bold;color: black">智能工厂</span>--%>
<%--        </a>--%>

<%--        <a style="width: 65px;display: inline-block;height: 65px" href="http://localhost:8080/AppDownload/toIndex?id=1">--%>
<%--            <img src="./image/icon/logo.jpg" style="width:50px;height:50px;border-radius:20px;display: block;margin: 2px auto;"></img>--%>
<%--            <span style="display: block;text-align: center;font-size: 13px;font-weight: bold;color: black">智能工厂</span>--%>
<%--        </a>--%>

    </div>

</body>

<style>
    canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(255, 253, 251, 0.89);
    /*rgba(255, 253, 251, 0.84)*/
        /*background-color: rgba(247, 244, 248, 0.78);*/
        z-index: -1;
    }
</style>

</html>

 
